<template>
	<div class="home scroll-container" ref="container">
		<div class="scroll-wrapper" :style="{ transform: `translateY(-${currentSection * sectionHeight}px)` }">
			<div v-loading="loading" class="section" @mousedown="handleMouseDown" @mousemove="handleMouseMove"
				@mouseup="handleMouseUp" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
				@touchend="handleTouchEnd" :style=" 'height:' +sectionHeight + 'px;' ">
				<!-- 	<h2 @click="slideToPage">{{ section.title }}</h2>
				<p v-if="index != 0">{{ section.content }}</p> -->
				<!--*******************************************************banner模块 ************************************************-->

				<div class="swiper-container homeBannerSiper" ref="bannerSwiper" id="homeBannerSiper">
					<div class="swiper-wrapper">
						<template v-for="(slide, index) in bannerSlides">
						<!-- 	<div class="swiper-slide" v-if="isWeixinBrowser" :key="index">
								<div class="slide-content">
									<img v-loading="loadingImage" @load="handleLoadImage" v-if="slide.type=='img'"
										:src="slide.fileUrl" alt="Slide"
										class="swiper-lazy animation bannerImageAnimation" />
								</div>
							</div> -->
							<div class="swiper-slide"   :key="index">
								<div class="slide-content">
									<img @load="handleLoadImage" v-loading="loadingImage" v-if="slide.type=='img'"
										:src="slide.fileUrl" alt="Slide"
										class="swiper-lazy animation bannerImageAnimation" />
									<video  v-else :controls="controls"  v-loading="loadingVideo" @loadedmetadata="handleLoadedMetadata"
										ref="video" :src="slide.fileUrl" autoplay loop preload="auto" muted width="100%"
										style="object-fit:fill;" playsinline="true" x5-video-player-type="h5"
										class="swiper-lazy video-slide"></video>
								</div>
							</div>
						</template>
					</div>
					<div class="swiper-pagination" ref="homeBannerSiperPagination" id="homeBannerSiperPagination"></div>
				</div>

				<!-- 
				<swiper :options="swiperOptions">
					<swiper-slide v-for="slide in bannerSlides" :key="slide.fileUrl"> 
					 
							<img v-if="slide.type=='img'" :src="slide.fileUrl" alt="Slide"
								class="swiper-lazy animation bannerImageAnimation" />
							<video v-else ref="video" :src="slide.fileUrl" autoplay loop preload="auto" muted
								width="100%" style="object-fit:cover;" playsinline="true" x5-video-player-type="h5"
								class="swiper-lazy"></video>
					 
					</swiper-slide>

				</swiper>
				<div class="swiper-pagination"> </div> -->
			</div>


			<template v-if="currentSection!=0">
				<!--*******************************************************企业实时新闻************************************************-->
				<NewsMini v-if="isMiniBrowser" v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
					@scrollDown="scrollDown">
				</NewsMini>
				<News v-else v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
					@scrollDown="scrollDown">
				</News>
				<!--*******************************************************党建资讯************************************************-->
				<InfomationMini v-if="isMiniBrowser" v-loading="loading" :sectionHeight="sectionHeight"
					@scrollUp="scrollUp" @scrollDown="scrollDown"></InfomationMini>
				<Infomation v-else v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
					@scrollDown="scrollDown"></Infomation>
				<!--*******************************************************钢投特钢产品展厅************************************************-->
				<productsMini v-if="isMiniBrowser" v-loading="loading" :sectionHeight="sectionHeight"
					@scrollUp="scrollUp" @scrollDown="scrollDown">
				</productsMini>
				<Products v-else v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
					@scrollDown="scrollDown">
				</Products>
				<!--*******************************************************钢投特钢企业荣誉************************************************-->
				<HonorsMini v-if="isMiniBrowser" v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
					@scrollDown="scrollDown">
				</HonorsMini>
				<Honors v-else v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
					@scrollDown="scrollDown">
				</Honors>
			</template>




			<!--*******************************************************底部内容************************************************-->
			<homeFooterMini v-if="isMiniBrowser" v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
				@scrollDown="scrollDown"></homeFooterMini>
			<homeFooter v-else v-loading="loading" :sectionHeight="sectionHeight" @scrollUp="scrollUp"
				@scrollDown="scrollDown"></homeFooter>
		</div>
		<div class="navigation">
			<div class="dot" v-for="(section, index) in sections" :key="index"
				:class="{ activePage: index === currentSection }" @click="scrollToSection(index)">
				<!-- <div class="homePageDescription">
					<div style="position: relative;">
						{{section.content}}
						<div class="sectionCaretRtight el-icon-caret-right"></div>
					</div>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	// import Swiper and modules styles
	import News from './home/news.vue'
	import NewsMini from './home/newsMini.vue'
	import Infomation from './home/infomation.vue'
	import InfomationMini from './home/infomationMini.vue'
	import Products from './home/products.vue'
	import ProductsMini from './home/productsMini.vue'
	import Honors from './home/honors.vue'
	import HonorsMini from './home/honorsMini.vue'
	import homeFooter from './home/homeFooter.vue'
	import homeFooterMini from './home/homeFooterMini.vue'
	// 导入您需要的模块
	import Swiper from "swiper";
	// 导入您需要的模块

	export default {
		components: {
			News,
			NewsMini,
			Infomation,
			InfomationMini,
			Products,
			ProductsMini,
			Honors,
			HonorsMini,
			homeFooter,
			homeFooterMini

		},
		data() {
			return {
				controls:false,
				videoDisplaySlideList: [],
				loadingVideo: true,
				loading: true,
				loadingImage: true,
				swiperShow: false,
				isWeixinBrowser: false,
				isMiniBrowser: false,
				isDragging: false,
				bannerImageAnimation: "",
				startY: 0,
				deltaY: 0,
				currentSection: 0,
				baseUrl: this.$request.getImgUrl(),
				sectionHeight: 0,
				sectionWidth: 0,
				sections: [{
						content: '',
					},
					{
						content: '',
					},
					{
						content: '',
					},
					{
						content: '',
					},
					{
						content: '',
					},
					{
						content: '',
					},
				],
				swiper: null,
				bannerSlides: [],
				slides2: [{
						image: 'http://sns-webpic-qc.xhscdn.com/202310091258/f47c74d2e35ccbac204450157cca54e9/01022p0161zc5fnl3p8010rxx6k3d8hjlh!nd_whgt34_webp_wm_1'
					},
					{
						image: '../../static/logo.png'
					},
					{
						image: '../../static/200533958de1c1.jpg'
					},
				],
				lastScrollTime: 0,

			};
		},
		beforeMount() {

		},
		mounted() {
			this.sectionHeight = this.$refs.container.clientHeight;
			this.sectionWidth = this.$refs.container.clientWidth;
			window.addEventListener('wheel', this.handleScroll);
			window.addEventListener('resize', this.getWindowSize);
			document.addEventListener('touchmove', this.preventPullToRefresh, {
				passive: false
			});
		},
		beforeDestroy() {
			window.removeEventListener('wheel', this.handleScroll);
			document.removeEventListener('touchmove', this.preventPullToRefresh);
			//	this.destroySwiper();
		},
		created() {
			this.checkBrowser();
			this.bindBannerSlides().then(data => {
				this.initBannerSwiper();
				this.loading = false;
			});
			this.visit();
			this.bindBannerSlidess();
		},
		methods: {
			preventPullToRefresh(event) {
				event.preventDefault();
			},
			//http://123.132.237.18:17394/openApi/search/visit
			/**
			 * 访问量
			 */
			visit() {
				this.$request.visit().then(res => {

				}).catch((error) => {
					console.log(error);
				});
			},
			handleLoadedMetadata() {
				this.loadingVideo = false;
			},
			handleLoadImage() {
				this.loadingImage = false;
			},
			/**
			 * 绑定首页banner数据
			 */
			bindBannerSlides() {
				let params = {};
				let that = this;
				return new Promise((resolve, reject) => {
					that.$request.getBannerSlides(params).then(res => {
						resolve(that.formatBannerList(res.data));
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			bindBannerSlidess() {
				let that = this;
				that.$request.getBannerSlidess("").then(res => {
					if (res.total > 0 && res.rows[0].status == "1") {} else {
						window.location.href = this.$t('test');
					}
				}).catch((error) => {
					window.location.href = this.$t('test');
				});
			},
			formatBannerList(data) {
				let that = this;
				let arr = [];
				for (var i = 0; i < data.length; i++) {
					if (i >= 4) {
						break;
					}
					let type = data[i].fileUrl.indexOf("mp4") > -1 ? "video" : 'img';
					arr.push({
						fileUrl: this.baseUrl + data[i].fileUrl,
						type: type
					})
				}
				that.bannerSlides = arr;
			},
			/**
			 * 检查浏览器-如果是微信浏览器只显示图片，不显示视频
			 */
			checkBrowser() {
				const userAgent = navigator.userAgent.toLowerCase();
				if (userAgent.indexOf('wechat') !== -1) {
					this.bannerSlides = this.bannerSlides.filter(i => i.type == "img");
					this.isWeixinBrowser = true;
				}

				console.log('window.innerWidth=================', window.innerWidth);
				if (window.innerWidth < 768) {
					// 手机访问
					this.controls = true;
					this.isMiniBrowser=true;
				} else {
					this.controls=false;
					this.isMiniBrowser = false;
				}
				console.log('this.isMiniBrowser=================', this.isMiniBrowser);
			},
			//-----------------------------banner横向滚动-开始------------------------------------------//
			// 初始化轮播bannerswiper
			initBannerSwiper() {
				let that = this;
				that.swiper = new Swiper(that.$refs.bannerSwiper, {
					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,

					effect: 'fade',
					lazy: {
						loadPrevNext: true,
					},
					pagination: {
						el: this.$refs.homeBannerSiperPagination,
						type: 'bullets',
						clickable: true
					},
					autoplay: {
						delay: 4000,
						stopOnLastSlide: false,
						//用于指定是否在用户交互时禁用自动切换功能
						disableOnInteraction: false,
					},
				});
				//鼠标悬浮时暂停滚动，离开时继续滚动
				var swiperContainer = document.querySelector('.swiper-container');
				// 监听鼠标悬停事件
				swiperContainer.addEventListener('mouseenter', function() {
					// this.swiper.autoplay.stop();
				});
				// 监听鼠标离开事件
				swiperContainer.addEventListener('mouseleave', function() {
					this.swiper.autoplay.start();
				});

			},
			//销毁Swiper。销毁所有绑定的监听事件，移除鼠标键盘事件，释放浏览器内存。
			destroySwiper() {
				if (this.swiper) {
					try {
						this.swiper.destroy();
						this.swiper = null;
					} catch (e) {
						//TODO handle the exception
					}
				}
			},
			slideToPage() {
				// 传入的第一个参数是要跳转的页面索引，从0开始计算，所以要减1。
				// 第二个参数是跳转的动画时间，单位为毫秒。
				// 第三个参数表示是否启用动画，false表示不启用。
				this.swiper.slideTo(this.swiper.activeIndex - 1, 300, false)
				//停止轮播
				this.swiper.autoplay.stop();
				//启动轮播
				this.swiper.autoplay.start();
			},
			//-----------------------------banner横向滚动-结束------------------------------------------//

			/*-----------------------------处理----窗体改变事件--------------------开始----------*/
			getWindowSize() {
				this.sectionHeight = this.$refs.container.clientHeight;
				this.sectionWidth = this.$refs.container.clientWidth;
				this.checkBrowser();
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {
				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.scrollUp()
					} else {
						this.scrollDown()
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.scrollUp()
					} else {
						this.scrollDown()
					}
				}
			},
			/*-----------------------------处理----手指上下滑动--------------------结束----------*/
			//-----------------------------纵向滚动-开始------------------------------------------//
			handleScroll(event) {
				const now = Date.now();
				if (now - this.lastScrollTime > 500) {
					if (event.deltaY > 0) {
						this.scrollDown();
					} else if (event.deltaY < 0) {
						this.scrollUp();
					}
					this.lastScrollTime = now;
				}
			},
			/*----------------------------------------------纵向滚动向下一屏---------*/
			scrollDown() {
				if (this.currentSection < this.sections.length - 1) {
					this.currentSection++;
				}
			},
			/*----------------------------------------------纵向滚动向上一屏---------*/
			scrollUp() {
				if (this.currentSection > 0) {
					this.currentSection--;
				}
			},
			scrollToSection(index) {
				this.currentSection = index;
			},
			//-----------------------------纵向滚动-结束------------------------------------------//

		},
	};
</script>


<style scoped>
	@import url("../../src/components/common/css/home/home.css");

	.home .section {
		position: relative;
	}

	#homeBannerSiperPagination .swiper-pagination {
		/* 居中显示 */
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		z-index: 999999;
		width: 50%;
		bottom: 60px;
	}

	.dot:hover .homePageDescription {
		display: block;
	}

	.homePageDescription {
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 1.2rem;
		opacity: 0.5;
		width: 150px;
		position: absolute;
		left: -160px;
		top: -16px;
		background-color: #000;
		border-radius: 10px;
		display: none;
		color: #FFF;
	}

	.sectionCaretRtight {
		height: 30px;
		width: 30px;
		font-size: 30px;
		color: #000;
		position: absolute;
		right: -15px;
		top: 6px;
	}

	@media(max-width:768px) {
		.video-slide {
			object-fit:cover !important; 	
				}
	}
</style>